<template>
  <div class="form-container" >
    <el-tabs type="border-card">
      <div>
        <p class="content-tit">单证盘点</p>
        <el-form :label-position="labelPosition" label-width="100px" :model="formData">
          <el-row type="flex" class="row-bg">
            <el-col :span="8">
              <el-form-item label="单证编码" size="mini">
                <el-select v-model="formData.certifyEdition" filterable placeholder="请选择">
                  <el-option
                    v-for="item in certifyTypeList"
                    :key="item.code"
                    :label="item.codeName"
                    :value="item.code">
                    <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单证名称" size="mini">
                <el-input v-model="formData.certifyName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单证版本" size="mini">
                <el-input v-model="formData.certifyName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" class="row-bg">
            <el-col :span="8">
              <el-form-item label="批次号" size="mini">
                <el-input v-model="formData.certifyApplyCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="盘点时间" size="mini">
                <el-date-picker type="date" v-model="formData.inventDate" placeholder="选择时间" :value-format="'yyyy-MM-dd'" :format="'yyyy-MM-dd'"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="管理机构" size="mini">
                <el-input v-model="formData.manageCom"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div align="right">
          <el-button type="primary" icon="el-icon-search" @click="">查询</el-button>
        </div>
      </div>
      <div >
        <p class="content-tit">
          <span @click="isShow('isShowSingles')" v-if='isShowSingles'>-</span>
          <span @click="isShow('isShowSingles')" v-else>+</span>单证库存数量信息</p>
        <el-table :data="CertifyCountList"  style="width: 100%" class='table-common' :highlight-current-row="true" border v-show="isShowSingles">
          <el-table-column label="#" checked="selectionData"
                           type="selection"
                           min-width="6%">
          </el-table-column>
          <el-table-column label="序号" type='index' min-width="8%" align="center" ></el-table-column>
          <el-table-column label="单证编码"  min-width="10%" align="center" ></el-table-column>
          <el-table-column label="单证名称"  min-width="10%" align="center" ></el-table-column>
          <el-table-column prop="certifyEdition" label="单证版本" min-width="9%" align="center"></el-table-column>
          <el-table-column label="管理机构"  min-width="10%" align="center" ></el-table-column>
          <el-table-column label="单证类型"  min-width="8%" align="center" ></el-table-column>
          <el-table-column label="系统库存数量"  min-width="8%" align="center" ></el-table-column>
          <el-table-column label="数据较正（实物数量）"  min-width="12%" align="center" ></el-table-column>
          <el-table-column label="情况说明"  min-width="14%" align="center" ></el-table-column>
          <el-table-column label="是否有号"  min-width="8%" align="center" ></el-table-column>
        </el-table>
        <div class="mar15 " align="right" v-show="isShowSingles">
          <el-pagination
            @current-change="handleCurrentChangeSingle"
            :current-page="selfPage.currentPage"
            :page-size="selfPage.perPage"
            layout="total, prev, pager, next, jumper"
            :total="selfPage.totalSize">
          </el-pagination>
        </div>
        <div align="right">
          <el-button type="primary" @click="">盘点通知</el-button>
          <el-button type="primary" @click="">开始盘点</el-button>
        </div>
        <p class="content-tit">
          <span @click="isShow('isShowSingle')" v-if='isShowSingle'>-</span>
          <span @click="isShow('isShowSingle')" v-else>+</span>单证库存明细信息</p>
        <el-table :data="CertifyQueryCountList"  style="width: 100%" class='table-common' :highlight-current-row="true" border v-show="isShowSingle">
          <el-table-column label="#" checked="selectionData"
                           type="selection"
                           min-width="6%">
          </el-table-column>
          <el-table-column label="序号" type='index' min-width="8%" align="center" ></el-table-column>
          <el-table-column label="单证编码"  min-width="10%" align="center" ></el-table-column>
          <el-table-column label="单证名称"  min-width="10%" align="center" ></el-table-column>
          <el-table-column prop="certifyEdition" label="单证版本" min-width="9%" align="center"></el-table-column>
          <el-table-column label="总入库数量"  min-width="8%" align="center" ></el-table-column>
          <el-table-column label="单证起号"  min-width="10%" align="center" ></el-table-column>
          <el-table-column label="单证止号"  min-width="10%" align="center" ></el-table-column>
          <el-table-column label="领用部门"  min-width="8%" align="center" ></el-table-column>
          <el-table-column label="领用数量"  min-width="8%" align="center" ></el-table-column>
          <el-table-column label="领用人"  min-width="8%" align="center" ></el-table-column>
          <el-table-column label="已回销数量"  min-width="6%" align="center" ></el-table-column>
          <el-table-column label="正常使用"  min-width="6%" align="center" ></el-table-column>
          <el-table-column label="作废"  min-width="6%" align="center" ></el-table-column>
          <el-table-column label="遗失"  min-width="6%" align="center" ></el-table-column>
          <el-table-column label="发放回退"  min-width="6%" align="center" ></el-table-column>
          <el-table-column label="备注"  min-width="10%" align="center" ></el-table-column>
        </el-table>
        <div class="mar15 " align="right" v-show="isShowSingle">
          <el-pagination
            @current-change="handleCurrentChangeSingle"
            :current-page="publicPage.currentPage"
            :page-size="publicPage.perPage"
            layout="total, prev, pager, next, jumper"
            :total="publicPage.totalSize">
          </el-pagination>
        </div>
      </div>
     <div align="right">
       <el-button type="primary" @click="">提交</el-button>
       <el-button type="primary" @click="">导出</el-button>
     </div>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    name: "card-inventory",
    data() {
      return {
        labelPosition: 'right',
        isShowSingles: true,
        isShowSingle: true,
        formData: {
          certifyCode: '',
          certifyName: '',
          certifyApplyCode: '',
          inventDate: '',
          manageCom: ''
        },
        selfPage: {
          currentPage: 1,
          hasMore: true,
          perPage: 10,
          totalPage: 0,
          totalSize: 0
        },
        publicPage: {
          currentPage: 1,
          hasMore: true,
          perPage: 10,
          totalPage: 0,
          totalSize: 0
        },
        CertifyCountList: [],
        CertifyQueryCountList: []
      }
    },
    methods: {
      isShow(val) {
        this[val] = !this[val]
      },
      handleSelectionChange(val) {
        this.selectionData = val;
      },
      handleCurrentChange(num) {
        this.selfFormData.pageNum = num
      },
      handleCurrentChangeSingle(num) {
        this.selfFormData.pageNum = num
      },
    }
  }
</script>

<style scoped>

</style>
